<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page language="java" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>登录页面</title>
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/bootstrap/css/bootstrap.min.css"/>
		<link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css"/>
		<script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>
		<style type="text/css">
			body {
				margin: 0;
				padding: 0;
				height: 100vh;
				display: flex;
				flex-flow: column nowrap;
			}
			.header {
				height: 100px;
				background-image: url(${pageContext.request.contextPath}/images/logo.png);
				background-repeat: no-repeat;
				background-position: 180px 30px;
			}
			.main {
				height: 400px;
				background-image: url(${pageContext.request.contextPath}/images/banner.jpg);
				background-repeat: repeat-x;
				display: flex;
				justify-content: flex-end;
				align-items: center;
			}
			.footer {
				flex: auto;
				text-align: center;
				line-height: 80px;
				font-size: 14px;
				color: #888888;
			}
			.login {
				width: 300px;
				background-color: white;
				border-radius: 10px;
				padding: 20px;
				margin-right: 200px;
			}
			.login input {
				height: 40px;
			}
			.login button {
				height: 40px;
				width: 100%;
			}
			.login-header {
				text-align: center;
				font-size: 20px;
				font-weight: bold;
			}
		</style>
	</head>
	<body>
    <div id="app">
      <div class="header"></div>
      <div class="main">
      	<div class="login">
      		<form action="login" method="post">
      			<div class="form-group login-header">
      				<div>请&emsp;登&emsp;录</div>
      			</div>
      			<div class="form-group input-group">
      				<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
      				<input type="text" name="userName" class="form-control" placeholder="用户名" v-model="loginForm.acct">
      			</div>
      			<div class="form-group input-group">
      				<span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
      				<input type="password" name="password" class="form-control" placeholder="密码" v-model="loginForm.pwd">
      			</div>
				<div class="form-group row">
      				<div class="col-md-6">
      					<input type="text" name="code" class="form-control" placeholder="验证码">
      				</div>
      				<div class="col-md-6">
      					<img src="validateCode" id="codeImage" onclick="changeImage()" >
      				</div>
      			</div>
      			<div class="form-group">
      				<button type="submit" class="btn btn-primary" <%--onclick="doLogin()"--%>>登&emsp;&emsp;录</button>
      			</div>
      		</form>
      	</div>
      </div>
      <div class="footer">
      	<div>版权所有&copy;：新开普电子股份有限公司  豫ICP备08102576号  未经授权本站内容禁止私自转载使用！</div>
      </div>
    </div>
	<c:if test="${!empty msg}">
		<script>
			var msg = "${msg}";
			layui.use('layer', function () {
				var layer = layui.layer;
				layer.msg(msg);
			})
		</script>
	</c:if>
    <script src="${pageContext.request.contextPath}/js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="${pageContext.request.contextPath}/bootstrap/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
			/*function doLogin(){
				// 在javascript中如何做页面跳转
				window.location.href = 'index.html'
			}*/
			function changeImage(){
				document.getElementById("codeImage").src = "validateCode?a=" + new Date().getTime();
			}
    </script>
	</body>
</html>
